<template>
<div class="tooth-img" ref="toothImg">
		<el-popover
			placement="right"
			trigger="click"
			:show-arrow="false"
			:hide-after="1"
			@hide="hidePopover"
		>
		<template #reference>
			<div class="tooth-data" @click="showTooth()" >
				<div class="tooth-data-left-top">
					<div style="display: inline-block" v-for="item in leftMockData" :key="item.id">
						<span v-if="item.isActive">{{item.id}}</span>
					</div>
				</div>
				<div class="tooth-data-right-top">
					<div style="display: inline-block" v-for="item in rightMockData" :key="item.id">
						<span v-if="item.isActive">{{item.id}}</span>
					</div>
				</div>
				<div class="tooth-data-left-bottom">
					<div style="display: inline-block" v-for="item in leftBottomMockData" :key="item.id">
						<span v-if="item.isActive">{{item.id}}</span>
					</div>
				</div>
				<div class="tooth-data-right-bottom">
					<div style="display: inline-block" v-for="item in rightBottomMockData" :key="item.id">
						<span v-if="item.isActive">{{item.id}}</span>
					</div>
				</div>
			</div>
		</template>
		<div class="tooth" v-if="isToothShow">
				<header class="tooth-head">
					<div class="btns">
						<el-button class="btn-2" :class="{active: isTooth}" @click="permanentTooth">恒牙</el-button>
						<el-button class="btn-2" :class="{active: !isTooth}" @click="toothSwitch">乳牙</el-button>
						<el-button class="btn-2" v-if="isActive" @click="reset">重置</el-button>
						<el-button class="btn-2" v-else @click="allClick">全选</el-button>
						<el-button class="btn-2"  @click="setUR">UR</el-button>
						<el-button class="btn-2" 	@click="setUL">UL</el-button>
						<el-button class="btn-2"  @click="setLR">LR</el-button>
						<el-button class="btn-2" 	@click="setLL">LL</el-button>
						<el-button class="btn-2" 	@click="clear">清除</el-button>
					</div>
					<div class="close" @click="close()">
						<el-icon><close /></el-icon>
					</div>
				</header>
				<div class="content">
					<template v-if="isTooth">
						<div class="tooth-size tooth-left-top">
							<div class="tooth-1 " v-for="(item) in permanentToothList" :key="item.id" @click="handleItem(item, 'left-top','恒牙')" :class="{'tooth-active': item.active }">
								<img class="img-size" :src="item.url" alt="">
								<span class="img-btn">{{item.id}}</span>
							</div>
						</div>
						<div class="tooth-size tooth-right-top">
							<div class="tooth-1 " v-for="(item) in CopyPermanentRight" :key="item.id" @click="handleItem(item, 'right-top', '恒牙')" :class="{'tooth-active': item.active }">
								<img class="img-size" :src="item.url" alt="">
								<span class="img-btn">{{item.id}}</span>
							</div>
						</div>
						<div class="tooth-size tooth-left-bottom">
							<div class="tooth-1 " v-for="(item) in CopyPermanentLeft" :key="item.id" @click="handleItem(item, 'left-bottom', '恒牙')" :class="{'tooth-active': item.active }">
								<img class="img-size" :src="item.url" alt="">
								<span class="img-btn">{{item.id}}</span>
							</div>
						</div>
						<div class="tooth-size tooth-right-bottom">
							<div class="tooth-1 " v-for="(item) in CopyPermanentRightBottom" :key="item.id" @click="handleItem(item, 'right-bottom', '恒牙')" :class="{'tooth-active': item.active }">
								<img class="img-size" :src="item.url" alt="">
								<span class="img-btn">{{item.id}}</span>
							</div>
						</div>
					</template>
					<!-- 乳牙 -->
					<template v-else>
						<div class="tooth-size tooth-left-top">
							<div class="tooth-1 " v-for="(item) in deciduousToothList" :key="item.id" @click="handleItem(item, 'left-top', '乳牙')" :class="{'tooth-active': item.active}">
								<img class="img-size" :src="item.url" alt="">
								<span class="img-btn">{{item.id}}</span>
							</div>
						</div>
						<div class="tooth-size tooth-right-top">
							<div class="tooth-1 " v-for="(item) in CopyDeciduousRight" :key="item.id" @click="handleItem(item, 'right-top', '乳牙')" :class="{'tooth-active': item.active}">
								<img class="img-size" :src="item.url" alt="">
								<span class="img-btn">{{item.id}}</span>
							</div>
						</div>
						<div class="tooth-size tooth-left-bottom">
							<div class="tooth-1 " v-for="(item) in CopyDeciduousLeft" :key="item.id" @click="handleItem(item, 'left-bottom', '乳牙')" :class="{'tooth-active': item.active}">
								<img class="img-size" :src="item.url" alt="">
								<span class="img-btn">{{item.id}}</span>
							</div>
						</div>
						<div class="tooth-size tooth-right-bottom">
							<div class="tooth-1 " v-for="(item) in CopyDeciduousRightBottom" :key="item.id" @click="handleItem(item, 'right-bottom', '乳牙')" :class="{'tooth-active': item.active}">
								<img class="img-size" :src="item.url" alt="">
								<span class="img-btn">{{item.id}}</span>
							</div>
						</div>
					</template>
				</div>
			</div>
	</el-popover>
	
	</div>

</template>

<script lang="ts">
import { Close } from '@element-plus/icons-vue'
import { defineComponent, ref, reactive, PropType, watch, onMounted } from 'vue';
// 恒牙(上)
import Tooth8 from '../../assets/image/Tooth_18_Facial.png';
import Tooth7 from '../../assets/image/l-7.png';
import Tooth6 from '../../assets/image/l-6.png';
import Tooth5 from '../../assets/image/l-5.png';
import Tooth4 from '../../assets/image/l-4.png';
import Tooth3 from '../../assets/image/l-3.png';
import Tooth2 from '../../assets/image/l-2.png';
import Tooth1 from '../../assets/image/l-1.png';
// 恒牙(下)
import Toothr8 from '../../assets/image/r-8.png';
import Toothr7 from '../../assets/image/r-7.png';
import Toothr6 from '../../assets/image/r-6.png';
import Toothr5 from '../../assets/image/r-5.png';
import Toothr4 from '../../assets/image/r-4.png';
import Toothr3 from '../../assets/image/r-3.png';
import Toothr2 from '../../assets/image/r-2.png';
import Toothr1 from '../../assets/image/r-1.png';

// 乳牙(上)
import dTooth1 from '../../assets/image/deciduous-1.png';
import dTooth2 from '../../assets/image/deciduous-2.png';
import dTooth3 from '../../assets/image/deciduous-3.png';
import dTooth4 from '../../assets/image/deciduous-4.png';
import dTooth5 from '../../assets/image/deciduous-5.png';

// 乳牙(下)
import dToothr1 from '../../assets/image/deciduous-b-1.png';
import dToothr2 from '../../assets/image/deciduous-b-2.png';
import dToothr3 from '../../assets/image/deciduous-b-3.png';
import dToothr4 from '../../assets/image/deciduous-b-4.png';
import dToothr5 from '../../assets/image/deciduous-b-5.png';

type ToothType = {
			id: string | number,
			url?: string,
			active: boolean
		}
type MockType = {
      id: string,
			isActive: boolean,
			// index: number,
    }
export default defineComponent({
	components: {
		Close
	},
	props: {
		lTToolist: {
			type: Array as PropType<MockType[]>
		},
		rTToolist: {
			type: Array as PropType<MockType[]>
		},
		lBToolist: {
			type: Array as PropType<MockType[]>
		},
		rBToolist: {
			type: Array as PropType<MockType[]>
		},
	},
	emits:['getLeftData', 'getRightData', 'getLeftBottomData', 'getRightBottomData'],
  setup(props, ctx) {
		

    const leftTop = ref('')
		const rightTop = ref('')
		const leftBottom = ref('')
		const rightBottom = ref('')

    const leftData = ref('')
    const leftData1 = ref('')

    const isActive = ref(false)
    const isTooth = ref(true)
    const isToothShow = ref(false)

		// 得到恒牙数据
		const getToothData = (arr: any[]) => {
			let res = reactive(<any>[])
			let list = ['1', '2', '3', '4', '5', '6', '7', '8']
			list.forEach((i, index) => {
				res.push({
					id: i,
					url: arr[index],
					active: false,
				})
			})

			return res
		}

		// 得到乳牙数据
		const getDeciduousToothData = (arr: any[]) => {
			let res = reactive(<any>[])
			let list = ['A', 'B', 'C', 'D', 'E']
			list.forEach((i, index) => {
				res.push({
					id: i,
					url: arr[index],
					active: false,
				})
			})
			return res
		}
		// 恒牙
		let leftToTop = [Tooth1, Tooth2, Tooth3, Tooth4, Tooth5, Tooth6, Tooth7, Tooth8]
		let leftToBottom = [Toothr1, Toothr2, Toothr3, Toothr4, Toothr5, Toothr6, Toothr7, Toothr8]
		// 乳牙
		let deciduousLeftToTop = [dTooth1, dTooth2, dTooth3, dTooth4, dTooth5]
		let deciduousLeftToBottom = [dToothr1, dToothr2, dToothr3, dToothr4, dToothr5]

		// 上部分牙
    let permanentToothList:ToothType[] = getToothData(leftToTop)
		permanentToothList.reverse()

    const CopyPermanentRight:ToothType[] = getToothData(leftToTop);
		// 下部分牙
		const CopyPermanentLeft:ToothType[] = getToothData(leftToBottom);
    CopyPermanentLeft.reverse()
		const CopyPermanentRightBottom:ToothType[] = getToothData(leftToBottom);

		// 乳牙
    const deciduousToothList:ToothType[] = getDeciduousToothData(deciduousLeftToTop);
		deciduousToothList.reverse()

		const CopyDeciduousRight:ToothType[] = getDeciduousToothData(deciduousLeftToTop);

		const CopyDeciduousRightBottom:ToothType[] = getDeciduousToothData(deciduousLeftToBottom);

		const CopyDeciduousLeft:ToothType[] = getDeciduousToothData(deciduousLeftToBottom);
		CopyDeciduousLeft.reverse()
		

		// 遍历函数
		const handleForEachData = (arr1: ToothType[], arr2: MockType[]) => {
			arr1.forEach(i => {
				arr2.forEach(j => {
					if(j.id === i.id) {
						i.active = j.isActive
					}
				})
			})
		}
		// 上面数据
		let leftMockData: MockType[] = reactive(props.lTToolist as MockType[])
		handleForEachData(permanentToothList, leftMockData)
		
		const rightMockData: MockType[] = reactive(props.rTToolist as MockType[])
		handleForEachData(CopyPermanentRight, rightMockData)
	
		const leftBottomMockData: MockType[] = reactive(props.lBToolist as MockType[])
		handleForEachData(CopyPermanentLeft, leftBottomMockData)

		const rightBottomMockData: MockType[] = reactive(props.rBToolist as MockType[])
		handleForEachData(CopyPermanentRightBottom, rightBottomMockData)

    const showTooth = () => {
				isToothShow.value = true
		}

    const permanentTooth = () => {
			isTooth.value = true
		}
    const toothSwitch = () => {
			isTooth.value = false
		}

    const reset = () => {
			isActive.value = false
		
			leftMockData.forEach(item => item.isActive = false)
			rightMockData.forEach(item => item.isActive = false)
			leftBottomMockData.forEach(item => item.isActive = false)
			rightBottomMockData.forEach(item => item.isActive = false)
			
			permanentToothList.forEach(item => item.active = false)
			CopyPermanentRight.forEach(item => item.active = false)
			CopyPermanentRightBottom.forEach(item => item.active = false)
			CopyPermanentLeft.forEach(item => item.active = false)

			deciduousToothList.forEach(item => item.active = false)
			CopyDeciduousRight.forEach(item => item.active = false)
			CopyDeciduousRightBottom.forEach(item => item.active = false)
			CopyDeciduousLeft.forEach(item => item.active = false)
		}

		const clear = () => {
			reset()
		}

    const allClick = () => {
			console.log('点击了全选')
			isActive.value = true
			if(isTooth.value) {
        permanentToothList.forEach(i => {
					i.active = true
					leftMockData.forEach(item => {
						if(item.id === i.id) {
							item.isActive = true
						}
					})
				})
        CopyPermanentRight.forEach(i => {
					i.active = true
					rightMockData.forEach(item => {
						if(item.id === i.id) {
							item.isActive = true
						}
					})
				})
        CopyPermanentRightBottom.forEach(i => {
					i.active = true
					leftBottomMockData.forEach(item => {
						if(item.id === i.id) {
							item.isActive = true
						}
					})
				})
        CopyPermanentLeft.forEach(i => {
					i.active = true
					rightBottomMockData.forEach(item => {
						if(item.id === i.id) {
							item.isActive = true
						}
					})
				})

			} else {
				
        deciduousToothList.forEach(i => {
					i.active = true
					leftMockData.forEach(item => {
						if(item.id === i.id) {
							item.isActive = true
						}
					})
				})
        CopyDeciduousRight.forEach(i => {
					i.active = true
					rightMockData.forEach(item => {
						if(item.id === i.id) {
							item.isActive = true
						}
					})
				})
        CopyDeciduousRightBottom.forEach(i => {
					i.active = true
					leftBottomMockData.forEach(item => {
						if(item.id === i.id) {
							item.isActive = true
						}
					})
				})
        CopyDeciduousLeft.forEach(i => {
					i.active = true
					rightBottomMockData.forEach(item => {
						if(item.id === i.id) {
							item.isActive = true
						}
					})
				})

			}
			

		}


		const setUR = () => {
			if(isTooth.value) {
				console.debug('恒牙')
				permanentToothList.forEach(i => {
					i.active = true
					leftMockData.forEach(item => {
						if(item.id === i.id) {
							item.isActive = true
						}
					})
				})

			} else {
				console.log('乳牙')
				deciduousToothList.forEach(i => {
					i.active = true
					leftMockData.forEach(item => {
						if(item.id === i.id) {
							item.isActive = true
						}
					})
				})
			}
		}

		const setUL = () => {
			if(isTooth.value) {
				console.debug('恒牙')
				CopyPermanentRight.forEach(i => {
					i.active = true
					rightMockData.forEach(item => {
						if(item.id === i.id) {
							item.isActive = true
						}
					})
				})

			} else {
				console.log('乳牙')
				CopyDeciduousRight.forEach(i => {
					i.active = true
					rightMockData.forEach(item => {
						if(item.id === i.id) {
							item.isActive = true
						}
					})
				})
			}

		}

		const setLR = () => {
			if(isTooth.value) {
				console.debug('恒牙')
				CopyPermanentLeft.forEach(i => {
					i.active = true
					leftBottomMockData.forEach(item => {
						if(item.id === i.id) {
							item.isActive = true
						}
					})
				})

			} else {
				console.log('乳牙')
				CopyDeciduousLeft.forEach(i => {
					i.active = true
					leftBottomMockData.forEach(item => {
						if(item.id === i.id) {
							item.isActive = true
						}
					})
				})
			}
		}

		const setLL = () => {
			if(isTooth.value) {
				console.debug('恒牙')
				CopyPermanentRightBottom.forEach(i => {
					i.active = true
					rightBottomMockData.forEach(item => {
						if(item.id === i.id) {
							item.isActive = true
						}
					})
				})

			} else {
				console.log('乳牙')
				CopyDeciduousRightBottom.forEach(i => {
					i.active = true
					rightBottomMockData.forEach(item => {
						if(item.id === i.id) {
							item.isActive = true
						}
					})
				})
			}
			
		}

    const close = () => {
			isToothShow.value = false
			
				
			
		}

    const handleItem = (item:ToothType, position: string, type: string) => {
			if(isTooth.value) {
				switch (position) {
				case 'left-top':
						item.active = !item.active
						if(item.active) {
							leftMockData.forEach((i) => {
									if(i.id === item.id) {
										i.isActive = true
									}
								})
						} else {
							leftMockData.forEach((i) => {
									if(i.id === item.id) {
										i.isActive = false
									}
								})
						}
						
						break;
					case 'right-top':
						item.active = !item.active
						if(item.active) {
							rightMockData.forEach((i) => {
									if(i.id === item.id) {
										i.isActive = true
									}
								})
						} else {
							rightMockData.forEach((i) => {
									if(i.id === item.id) {
										i.isActive = false
									}
								})
						}
						break;
					case 'left-bottom':
						item.active = !item.active
						if(item.active) {
							leftBottomMockData.forEach((i) => {
									if(i.id === item.id) {
										i.isActive = true
									}
								})
						} else {
							leftBottomMockData.forEach((i) => {
									if(i.id === item.id) {
										i.isActive = false
									}
								})
						}
						break;
					case 'right-bottom':
						item.active = !item.active
						if(item.active) {
							rightBottomMockData.forEach((i) => {
									if(i.id === item.id) {
										i.isActive = true
									}
								})
						} else {
							rightBottomMockData.forEach((i) => {
									if(i.id === item.id) {
										i.isActive = false
									}
								})
						}
						break;
					default:
						break;
				}
			} else {
				switch (position) {
				case 'left-top':
						item.active = !item.active
						if(item.active) {
							leftMockData.forEach((i) => {
									if(i.id === item.id) {
										i.isActive = true
									}
								})
						} else {
							leftMockData.forEach((i) => {
									if(i.id === item.id) {
										i.isActive = false
									}
								})
						}
						
						break;
					case 'right-top':
						item.active = !item.active
						if(item.active) {
							rightMockData.forEach((i) => {
									if(i.id === item.id) {
										i.isActive = true
									}
								})
						} else {
							rightMockData.forEach((i) => {
									if(i.id === item.id) {
										i.isActive = false
									}
								})
						}
						break;
					case 'left-bottom':
						item.active = !item.active
						if(item.active) {
							leftBottomMockData.forEach((i) => {
									if(i.id === item.id) {
										i.isActive = true
									}
								})
						} else {
							leftBottomMockData.forEach((i) => {
									if(i.id === item.id) {
										i.isActive = false
									}
								})
						}
						break;
					case 'right-bottom':
						item.active = !item.active
						if(item.active) {
							rightBottomMockData.forEach((i) => {
									if(i.id === item.id) {
										i.isActive = true
									}
								})
						} else {
							rightBottomMockData.forEach((i) => {
									if(i.id === item.id) {
										i.isActive = false
									}
								})
						}
						break;
					default:
						break;
				}
			}
			
		}

		const hidePopover = () => {
			let leftMockData1 = JSON.parse(JSON.stringify(leftMockData))
				let rightMockData1 = JSON.parse(JSON.stringify(rightMockData))
				let leftBottomMockData1 = JSON.parse(JSON.stringify(leftBottomMockData))
				let rightBottomMockData1 = JSON.parse(JSON.stringify(rightBottomMockData))
				ctx.emit('getLeftData', leftMockData1)
				ctx.emit('getRightData', rightMockData1)
				ctx.emit('getLeftBottomData', leftBottomMockData1)
				ctx.emit('getRightBottomData', rightBottomMockData1)
		}

    return {
      leftTop,
      leftData,
      leftData1,
      rightTop,
      leftBottom,
      rightBottom,

      isActive,
      isTooth,
      isToothShow,

			leftMockData,
			rightMockData,
			leftBottomMockData,
			rightBottomMockData,


      permanentToothList,
      CopyPermanentRight,
      CopyPermanentRightBottom,
      CopyPermanentLeft,

      deciduousToothList,
      CopyDeciduousRight,
      CopyDeciduousRightBottom,
      CopyDeciduousLeft,

			setUR,
			setUL,
			setLR,
			setLL,
			clear,

      showTooth,
      permanentTooth,
      toothSwitch,
      reset,
      allClick,
      close,
      handleItem,
			hidePopover
    }
  },
	mounted() {
		// console.log('mounted')
	},

})
</script>

<style lang="scss" scoped>
.tooth {
	width: 800px;
	height: 300px;
	box-shadow: 0 0 1px #000;
	background: white;
	box-sizing: border-box;
	.tooth-head {
		height: 45px;
		line-height: 45px;
		display: flex;
		justify-content: space-between;
		.btns {
			padding-left: 10px;
			display: flex;
			align-items: center;

		}
		.close {
			padding-right: 20px;
			cursor: pointer;
		}
	}
	.content {
		background: #ccc;
		width: 100%;
		height: calc(100% - 45px);
		display: flex;
		flex-wrap: wrap;
		.tooth-size {
			width: 50%;
			height: 50%;
			box-sizing: border-box;
		}
		.tooth-left-top {
			border-right: 1px solid white;
			border-bottom: 1px solid white;
			display: flex;
			// justify-content: space-around;
			align-content: center;
			box-sizing: border-box;
			.tooth-1 {
				// padding: 5px;
				flex: 1;
				text-align: center;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
			}
			.tooth-1:hover {
				border: 1px solid $mainColor;
				box-sizing: border-box;
			}
		}
		.tooth-left-bottom {
			border-right: 1px solid white;
			box-sizing: border-box;
			display: flex;
			.tooth-1 {
				// padding: 5px;
				flex: 1;
				text-align: center;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
			}
			.tooth-1:hover {
				border: 1px solid $mainColor;
				box-sizing: border-box;
			}
		}
		.tooth-right-top {
			border-bottom: 1px solid white;
			box-sizing: border-box;
			display: flex;
			.tooth-1 {
				// padding: 5px;
				flex: 1;
				text-align: center;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;

				.img-size {
					transform: rotateY(-180deg);
				}
			}
			.tooth-1:hover {
				border: 1px solid $mainColor;
				box-sizing: border-box;
			}
		}
		.tooth-right-bottom {
			display: flex;
			.tooth-1 {
				// padding: 5px;
				flex: 1;
				text-align: center;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;

				.img-size {
					transform: rotateY(-180deg);
				}
			}
			.tooth-1:hover {
				border: 1px solid $mainColor;
				box-sizing: border-box;
			}
		}
		.img-size {
				padding: 8px 0;
				width: 35px;
				height: 80px;
				display: inline-block;
			}
		.img-btn {
			text-align: center;
			// box-sizing: border-box;
			border: 1px solid #ccc;
			background: white;
			width: 35px;
			border-radius: 4px;
			cursor: pointer;
			display: block;
			margin-left: 5px;
		}
	}

}

// 牙齿数据
.tooth-data {
	width: 120px;
	min-height: 60px;
	background: white;
	display: flex;
	flex-wrap: wrap;
	overflow: hidden;
	.tooth-data-left-top {
		border-right: 1px solid #000;
		border-bottom: 1px solid #000;
		box-sizing: border-box;
		width: 50%;
		// height: 50%;
		text-align: right;
    unicode-bidi: bidi-override;
		direction: rtl;
		// word-break: break-all;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	.tooth-data-right-top {
		border-bottom: 1px solid #000;
		box-sizing: border-box;
		width: 50%;
		// height: 50%;
		text-align: left;
		// word-break: break-all;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	.tooth-data-right-bottom {
		
		box-sizing: border-box;
		width: 50%;
		// height: 50%;
		text-align: left;
		// word-break: break-all;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	.tooth-data-left-bottom {
		width: 50%;
		// height: 50%;
		text-align: right;
		border-right: 1px solid #000;
		box-sizing: border-box;
		unicode-bidi: bidi-override;
		direction: rtl;
		// word-break: break-all;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
}


.tooth-active {
	background: $mainColor;
	// color: white;
}
.active {
	background: $mainColor;
	color: white;
}
</style>